<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>我的积分</span>
        <el-tag>{{appObject.myScore.score}}</el-tag>
      </div>
    </template>
    <el-table :data="appObject.scores" style="width: 100%" :show-header="false">
      <el-table-column prop="userName" label="用户" width="180" />
      <el-table-column label="积分">
        <template #default="scope">
          <el-progress :percentage="scope.row.score/10">
            <el-button text>{{scope.row.score}}</el-button>
          </el-progress>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  import {
    getScore,
    getAllScore
  } from '../http/userApi.js'

  import userStore from '../store/user.js'
  import {
    storeToRefs
  } from 'pinia'

  const uStore = userStore()

  const appObject = reactive({
    myScore: {},
    scores: []
  })

  const initData = () => {
    getScore(uStore.getUserId).then(res => {
      res = res.data
      appObject.myScore = res.data
    })
    getAllScore().then(res => {
      res = res.data
      appObject.scores = res.data
    })
  }
  initData()
</script>

<style scoped>
</style>
